<template>
  <div class="coll_word_comp" v-loading="tableLoading" element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.4)">
    <div class="coll_word_title">{{ $t("chatGpt.callWord.title") }}</div>
    <div class="sub_title">{{ $t("chatGpt.callWord.titleSub") }}</div>
    <div class="context_classify">
      <div class="classify_box">
        <span class="classify_name" :class="[classify_name_active.length == 0 ? 'classify_name_active' : '']"
          @click="classifyNameClick('')">{{ $t("chatGpt.callWord.allBtn") }}</span>
        <span class="classify_name" :class="[classify_name_active.includes(v.value) ? 'classify_name_active' : '']"
          v-for="(v, i) in wiki_prompt_type" :key="v.value" @click="classifyNameClick(v)">{{ v.label }}</span>
      </div>
    </div>
    <!-- 搜索 -->
    <div class="search_box">
      <div class="inputBox">
        <img src="../../../../assets/images/chatgpt/search.png" style="width:18px;" alt="" />
        <el-input v-model="searchInput" :placeholder="$t('chatGpt.callWord.searchPlaceholder')" class="input"
          @keydown.enter.native="searchEnterFunc"></el-input>
      </div>
    </div>
    <div class="scoll_y" v-infinite-scroll="getTableData" infinite-scroll-distance="1">
      <div class="call_word_all">
        <div v-for="(item, index) in tableData" :key="index" class="call_box"
          :class="[index % 3 === 0 ? 'blueBg' : index % 3 === 1 ? 'redBg' : 'greenBg']"
          @click="callWordListClick(item)">
          <div class="row_div">
            <div class="title1">{{ item.title }}</div>
            <div class="title2">{{ item.desc }}</div>
          </div>
          <div class="row_div1">
            <div class="title3">
              {{ item.prompt }}
            </div>
          </div>
        </div>
        
      </div>
      <el-divider v-if="tableLoading">
          <i class="el-icon-loading"></i>
          {{ $t("chatGpt.callWord.loading") }}
        </el-divider>
        <el-divider v-if="divider">{{ $t("chatGpt.callWord.noMore") }}</el-divider>
      <div v-if="tableData.length == 0">
        <el-empty :description="$t('chatGpt.callWord.noData')"></el-empty>
      </div>
    </div>
  </div>
</template>


<script setup name="yu-call-word-all" lang="ts">
import chatAgentApi from "@/api/chatgpt/chatAgentApi";
const tableLoading = ref(false)
const divider = ref(false)
const classify_name_active = ref([])
const searchInput = ref("")
const tableData = ref([])
const requestStr = ref({
  page: 1,
  size: 20,
  total: 0,
  pageCount: 1,
})
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { wiki_prompt_type } = toRefs<any>(proxy?.useDict('wiki_prompt_type'));
const emit = defineEmits(['callWordListClick'])
const classifyNameClick = (v: any) => {
  if (v == "") {
    classify_name_active.value = [];
  } else {
    if (classify_name_active.value.includes(v.value)) {
      const index = classify_name_active.value.indexOf(v.value);
      if (index > -1) {
        classify_name_active.value.splice(index, 1);
      }
    } else {
      classify_name_active.value.push(v.value);
    }
  }
  tableData.value = [];
  requestStr.value.page = 1;
  getTableData();
}
// 获取表格
const getTableData = () => {
  if (requestStr.value.page > requestStr.value.pageCount) {
    divider.value = true;
    return;
  }
  if (!tableLoading.value) {
    tableLoading.value = true;
    chatAgentApi
      .aiqaPromptGet({
        pageNum: requestStr.value.page,
        pageSize: requestStr.value.size,
        title: searchInput.value,
        type: classify_name_active.value.join(","),
        sort: "id,desc",
      })
      .then((result:any) => {
        tableLoading.value = false;
        requestStr.value.total = result.total;
        requestStr.value.pageCount = result.pageSize;
        tableData.value = [...tableData.value, ...result.rows];
        requestStr.value.page += 1;
      })
      .catch((err:any) => {
        tableLoading.value = false;
      });
  }
}
//  搜索框
const searchEnterFunc = () => {
  tableData.value = []
  requestStr.value.page = 1
  requestStr.value.pageCount=1
  getTableData()
}
//  单击了提示词
const callWordListClick = (v: any) => {
  emit("callWordListClick", v);
}
onMounted(() => {
})
</script>
<style scoped lang="scss">
@mixin textOverflow($clamp) {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: $clamp; //元素几行显示
  -webkit-box-orient: vertical;
}

.coll_word_comp {
  width: 100%;
  height: calc(100vh - 90px);

  // height: 100vh;
  .coll_word_title {
    font-size: 26px;
    font-weight: 900;
    color: #0a1b32;
    text-align: center;
  }

  .sub_title {
    font-size: 12px;
    font-weight: 700;
    color: #9ba1af;
    text-align: center;
    margin-top: 4px;
  }

  .context_classify {
    display: flex;
    margin-bottom: 20px;
    margin-top: 20px;
    padding: 0 20px;

    .classify_box {
      width: calc(100% - 26px);

      .classify_name {
        display: inline-block;
        padding: 6px 11px;
        background: #f9fbfc;
        border-radius: 12px;
        font-size: 12px;
        color: #3d3d3d;
        text-align: center;
        margin-right: 8px;
        margin-bottom: 11px;
        cursor: pointer;
      }

      .classify_name_active {
        color: #6178ff;
      }

      .classify_name:hover {
        @extend .classify_name_active;
      }
    }
  }

  .search_box {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;

    .inputBox {
      width: 307px;
      // height: 30px;
      padding: 6px;
      background: #ffffff;
      border-radius: 5px 5px 5px 5px;
      opacity: 1;
      border: 1px solid #f9fbfb;
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .input {
        width: 270px;

        &:deep(.el-input__wrapper) {
          border: 0;
          height: 22px;
          line-height: 22px;
          box-shadow: none;
        }
      }
    }
  }

  .scoll_y {
    height: calc(100% - 245px);
    overflow: auto;
  }

  .call_word_all {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    // justify-content: space-between;
    padding: 6px 8px;

    .call_box {
      width: 262px;
      height: 190px;
      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.302);
      border-radius: 0px 30px 0px 30px;
      border: 2px solid #ffffff;
      // margin: 25px;
      cursor: pointer;
      transition: border 0.2s;
    }

    .blueBg {
      background: linear-gradient(180deg, #d5ebfe 5%, #fefefe 98%);
    }

    .redBg {
      background: linear-gradient(180deg, #e7e2fa 5%, #fefefe 98%);
    }

    .greenBg {
      background: linear-gradient(180deg, #f9ebe0 5%, #fefefe 98%);
    }

    .call_box:hover {
      border-color: #9bc2ff;
    }

    .row_div {
      padding: 19px 22px;
      border-bottom: 1px solid #afd4f4;
    }

    .row_div1 {
      padding: 19px 22px;
    }

    .title1 {
      font-size: 16px;
      font-weight: 700;
      color: #27264d;
      @include textOverflow(1);
    }

    .title2 {
      font-size: 12px;
      font-weight: 500;
      color: #a9b4c2;
      margin-top: 4px;
      @include textOverflow(1);
    }

    .title3 {
      font-size: 14px;
      font-weight: 500;
      line-height: 18px;
      color: #27264d;
      @include textOverflow(4);
    }
  }

  :deep(.el-divider__text) {
    background-color: #f6f7f9;
    color: #8a8b8d;
  }
}
</style>
